<template>
  <div class="home">
    <header-top @searchData="LoadData"></header-top>
    <nav-bar></nav-bar>
    <three-step></three-step>

    <!-- 酒店展示 -->
    <div>
      <!-- 选择区域开始 -->
      <div class="container select">
        <div class="select-option">
          <div class="select-option-title pull-left">酒店区域:</div>
          <div class="select-option-item pull-left">
            <button
              :class="{ leiyao_active:item==changeData.city }"
              @click="changeSearch(item,'city')"
              v-for="(item, i) in change.cityList"
              :key="i"
            >
              {{ item }}
            </button>
          </div>
        </div>

        <div class="select-option">
          <div class="select-option-title pull-left">酒店类型:</div>
          <div class="select-option-item pull-left">
            <button
              :class="{ leiyao_active:item==changeData.type }"
              @click="changeSearch(item,'type')"
              v-for="(item, i) in change.typeList"
              :key="i"
            >
              {{ item }}
            </button>
          </div>
        </div>

        <div class="select-option">
          <div class="select-option-title pull-left">酒店桌数:</div>
          <div class="select-option-item pull-left">
            <button
              :class="{ leiyao_active:item==changeData.table }"
              @click="changeSearch(item,'table',change.tableNum[i])"
              v-for="(item, i) in change.tableList"
              :key="i"
            >
              {{ item }}
            </button>
          </div>
        </div>

        <div class="select-option">
          <div class="select-option-title pull-left">每桌价格:</div>
          <div class="select-option-item pull-left">
            <button
              :class="{ leiyao_active:item==changeData.price }"
              @click="changeSearch(item,'price',change.priceNum[i])"
              v-for="(item, i) in change.priceList"
              :key="i"
            >
              {{ item }}
            </button>

            <span class="input-price">
              <input type="text" id="min_price" placeholder="¥" />
              -
              <input type="text" id="max_price" placeholder="¥" />
              <button class="btn btn-primary">确定</button>
            </span>
          </div>
        </div>

        <div class="select-option">
          <div class="select-option-title pull-left">排序筛选:</div>
          <div class="select-option-item pull-left">
            <button
              :class="{ leiyao_active:item==changeData.sort }"
              @click="changeSearch(item,'sort')"
              v-for="(item, i) in change.sortList"
              :key="i"
            >
              {{ item }}
            </button>
          </div>
        </div>
      </div>
      <!-- 区域结束 -->
      <!-- main开始 -->
      <div class="container main clearfix">
        <!-- 酒店列表 -->
        <div class="main-hotel-list pull-left">
          <!-- 酒店信息 -->
          <div class="hotel-item" v-for="(item, i) in newResults" :key="i">
            <!-- 标题图 -->
            <div class="pull-left hotel-item-img">
              <router-link :to="`detail/${item.hid}`">
                <img :src="item.titlepicfile" :alt="item.headline" />
              </router-link>
            </div>
            <!-- 酒店左 -->
            <div class="pull-left hotel-info-left">
              <p class="hotel-title">
                <router-link to="detail" class="a_hover">{{
                  item.headline
                }}</router-link>
              </p>
              <ul class="hotel-data clearfix">
                <li>
                  <span>区域</span>
                  <span>{{ item.county }}</span>
                </li>
                <li>
                  <span>类型</span>
                  <span>{{ item.genre }}</span>
                </li>
                <li>
                  <span>婚宴厅</span>
                  <span>{{ item.min_area }}-{{ item.max_area }}m²</span>
                </li>
                <li>
                  <span>层高</span>
                  <span>{{ item.min_h }}-{{ item.max_h }}m</span>
                </li>
              </ul>
              <p class="hotel-people">
                <span>{{ item.comment }}</span
                >条评论
              </p>
              <p class="hotel-position">
                <span></span>
                <span>{{ item.place }}</span>
              </p>
            </div>
            <!-- 酒店右 -->
            <div class="pull-right hotel-info-right">
              <ul class="clearfix">
                <li>
                  <p>
                    <span>{{ item.canteen }}</span
                    >个
                  </p>
                  <p>婚宴厅</p>
                </li>
                <li>
                  <p>
                    <span>{{ item.menu }}</span
                    >套
                  </p>
                  <p>婚宴菜单</p>
                </li>
                <li>
                  <p>
                    <span>{{ item.min_table }}-{{ item.max_table }}</span
                    >桌
                  </p>
                  <p>婚宴席</p>
                </li>
              </ul>
              <p>
                ¥<span>{{ item.min_price }}-{{ item.max_price }}</span
                >/桌
              </p>
            </div>
          </div>
        </div>
        <!-- 侧边栏 -->
        <side></side>
      </div>
      <!-- main结束 -->

      <!-- 翻页 -->
      <div class="container">
        <div class="pages">
          <p>&lt;上一页</p>
          <a href="#">1</a>
          <a href="#">2</a>
          <a href="#">3</a>
          <a href="#">4</a>
          <a href="#">5</a>
          <a href="#">6</a>
          <a href="#">7</a>
          <a href="#">8</a>
          <a href="#">9</a>
          <a href="#">10</a>
          <span>...</span>
          <a href="#">50</a>
          <p>下一页&gt;</p>
        </div>
      </div>
      <!-- 翻页结束 -->

      <!--  -->
      <p style="display: block; height: 200px"></p>
    </div>
    <my-footer></my-footer>
  </div>
</template>
<script>
// @ is an alias to /src
import navBar from "../components/leiyao/navBar";
import headerTop from "../components/leiyao/header";
import threeStep from "../components/leiyao/threeStep";
import Side from "../components/leiyao/sidebar.vue";


/**未知文件 */
// import { config } from 'vue/types/umd';

export default {
  components: {
    navBar,
    headerTop,
    threeStep,
    Side,
  },
  data() {
    return {
      results: [], //初始数据酒店列表
      newResults: [], //真实酒店数据列表
      // 分类项筛选
      change: {
      cityList:["不限","杭州","上海","南京","深圳","北京","广州","天津","宁波","成都","武汉"],
      typeList:["不限","特色餐厅","奢华五星","豪华四星","婚礼堂","其他酒店"],
      tableList:["不限","10桌以下","10-20桌","20-30桌","30-40桌","40-50桌","50桌以上"],
      tableNum:["不限",[1,10],[10,20],[20,30],[30,40],[40,50],[50,0]],
      priceList:["不限","2000元以下","2000-3000元","3000-4000元","4000-5000元","5000元及以上"],
      priceNum:["不限",[0,2000],[2000,3000],[3000,4000],[4000,5000],[5000,0]],
      sortList: ["不限", "最新", "价格从低到高", "价格从高到低"]
      },
      changeData: {
        type: '不限',
        table: '不限',
        price: '不限',
        sort: '不限',
      },
      val:{
        a:0,
        b:0,
        c:0,
        genre:'',
        min_table:'',
        max_table:'',
        min_price:'',
        max_price:''
      }
    };
  },
  methods: {
    changeSearch(change,name,Num) {
      console.log(change,name,Num)
      // 动态给change赋值改变css样式
      this.changeData[name]=change

      this.newResults=this.results.filter((res,i)=>{
      if(!this.val.genre||this.val.a==1){this.val.genre=res.genre,this.val.a=1}
      if(!this.val.min_table||this.val.b==1){this.val.min_table=res.min_table,this.val.max_table=res.max_table,this.val.b=1}
      if(!this.val.min_price||this.val.c==1){this.val.min_price=res.min_price,this.val.max_price=res.max_price,this.val.c=1}
      if(name=='type'&&change!='不限'){this.val.genre=change,this.val.a=0}else if(name=='type'&&change=='不限'){this.val.genre=res.genre,this.val.a=0}
      if(name=='table'&&change!='不限'){this.val.min_table=Num[0],this.val.max_table=Num[1],this.val.b=0}else if(name=='table'&&change=='不限'){this.val.min_table=res.min_table,this.val.max_table=res.max_table,this.val.b=0}
      if(name=='price'&& change!='不限'){this.val.min_price=Num[0],this.val.max_price=Num[1],this.val.c=0}else if(name=='price'&&change=='不限'){this.val.min_price=res.min_price,this.val.max_price=res.max_price,this.val.c=0}
      // val为表值
      return res.genre==this.val.genre 
      // && res.min_table >=this.val.min_table && res.max_table<=this.val.max_table
      })
    },
    LoadData(Sval) { 
      if (Sval) {
        return (this.newResults = Sval);
      }     
      this.axios.get("/hotel").then((res) => {
        this.results = res.data.results;
        this.newResults = JSON.parse(JSON.stringify(res.data.results),)
        console.log(this.results===this.newResults)

      });
    },
  },
  mounted() {
    this.LoadData();
  },
};
</script>
<style scoped>
/* 来自APP.vue */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* 禁止复制  */
  /* user-select:none; */
  /*光标透明 */
  caret-color: rgba(0, 0, 0, 0);
}
.container {
  width: 1200px;
  margin: 0 auto;
}
.clearfix::after {
  display: block;
  clear: both;
  content: "";
}
a {
  text-decoration: none;
  outline: none;
}
ul li {
  list-style: none;
}
.btn {
  display: inline-block;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
  border: 1px solid transparent;
  outline: none;
}
.btn-primary {
  background-color: #f83244;
  color: #fff;
}
.a_hover {
  color: #333;
}
.a_hover:hover {
  color: #f83244;
}
.pull-left {
  float: left;
}
.pull-right {
  float: right;
}

.select {
  border: 1px solid #e8e8e8;
  padding: 0 25px;
}
.select-option {
  height: 65px;
  line-height: 65px;
  box-sizing: border-box;
  border-bottom: 1px dashed #ccc;
  font-size: 14px;
}
.select-option-title {
  color: #999;
  margin-right: 10px;
}
.select-option-item > button {
  color: #666666;
  padding: 3px 12px;
  margin: 0px 2px;
  border: 1px solid transparent;
  cursor: pointer;
  outline: none;
  background: none;
}
.select-option-item > button:hover {
  color: #f83244;
  border: 1px solid #f83244;
  border-radius: 2px;
}
.select .select-option .input-price {
  margin-left: 10px;
}
.select .select-option .input-price button {
  width: 56px;
  line-height: 24px;
  height: 26px;
  margin-left: 10px;
}

.select .select-option .input-price button:hover {
  background: rgba(248, 50, 68, 0.8);
}
#max_price,
#min_price {
  box-sizing: border-box;
  width: 76px;
  height: 26px;
  border: 1px solid #e8e8e8;
  color: #333;
  outline: none;
  padding-left: 6px;
}

/* 
    预选定,后期改
 */
.leiyao_active {
  color: #f83244 !important;
  border: 1px solid #f83244 !important;
  border-radius: 2px;
}
/* 
    注意上方
  */

.main {
  margin-top: 30px;
}

.main-hotel-list {
  width: 960px;
}
.hotel-item {
  margin-bottom: 30px;
  height: 222px;
  border-bottom: 1px solid #e8e8e8;
}

/* 酒店图 */
.hotel-item-img {
  width: 190px;
  height: 190px;
  background-color: #f8f8f8;
  border: 1px solid #e8e8e8;
}
.hotel-item-img a img {
  width: 100%;
  height: 100%;
}

/* 酒店左 */
.hotel-info-left {
  margin-left: 30px;
  font-size: 14px;
}
.hotel-info-left > .hotel-title > a {
  font-size: 18px;
  font-weight: bold;
}
.hotel-info-left > .hotel-data {
  margin-top: 18px;
}
.hotel-info-left > .hotel-data li {
  float: left;
  margin-right: 10px;
  padding-right: 10px;
  border-right: 1px solid #ccc;
}
.hotel-info-left > .hotel-data li:last-child {
  border: 0;
}

.hotel-info-left > .hotel-data span {
  color: #333;
}
.hotel-info-left > .hotel-data span:nth-child(odd) {
  color: #999999;
  margin-right: 5px;
}
.hotel-info-left > .hotel-people {
  font-size: 14px;
  margin-top: 18px;
  color: #333;
}
.hotel-info-left > .hotel-people > span {
  color: #fe7e33;
  font-weight: bold;
}
.hotel-info-left > .hotel-position {
  margin-top: 60px;
  font-size: 14px;
  color: #666;
}

/* 酒店右 */
.hotel-info-right ul > li {
  padding: 0 16px;
  float: left;
  border-right: 1px solid #ccc;
  font-size: 12px;
  color: #666;
  text-align: center;
}
.hotel-info-right ul li:last-child {
  border-right: 0;
}
.hotel-info-right li > p:first-child {
  font-size: 14px;
  color: #fe7e33;
  font-weight: bold;
}
.hotel-info-right li span {
  font-size: 20px;
  margin-right: 3px;
}
.hotel-info-right > p {
  margin-top: 110px;
  color: #f83244;
  font-size: 12px;
  text-align: right;
  padding: 0 16px;
}
.hotel-info-right > p > span {
  font-size: 24px;
  font-weight: bold;
}

/* 侧边栏 */
.sidebar {
  min-height: 580px;
  width: 210px;
}
.sidebar > div:last-child {
  margin-top: 24px;
}
.side-block > ul {
  border: 1px solid #e8e8e8;
  min-height: 260px; /*设置最小高度,能好看点 */
  padding: 20px;
  box-sizing: border-box;
}
.side-block > div {
  width: 210px;
  height: 40px;
  line-height: 40px;
  background-color: #fa4f5f;
  text-align: center;
  color: #fff;
  font-size: 18px;
}

.side-block > ul > li {
  margin-bottom: 8px;
  font-size: 14px;
  color: #666;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.side-block > ul > li > a {
  color: #666;
  display: block;
}
.side-block > ul > li > a:hover {
  color: #f83244;
}
.side-block > ul > li > a > div {
  height: 60px;
  font-size: 12px;
  color: #999;
  margin-top: 15px;
}
.side-block p {
  margin-left: 10px;
  margin-bottom: 5px;
}
.side-block img {
  width: 60px;
  height: 60px;
}
.pages {
  display: flex;
  justify-content: center;
  padding-top: 50px;
}
.pages a,
.pages p {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  border: 1px solid #e7e7e7;
  color: #666;
  height: 34px;
  text-align: center;
  font-size: 12px;
}
.pages p {
  margin: 0 5px;
  width: 78px;
}
.pages p:hover,
.pages a:hover {
  color: #f83244;
}
.pages span {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  padding: 0px 3px;
}
</style>
